<template>
  <el-dialog
    v-model="state.visible"
    :show-close="false"
    width="600"
    align-center
    class="cusdia"
    @opened="getTree"
  >
    <template #header="{ close }">
      <div class="my-header">
        <h4 class="titleClass">添加视频</h4>
        <el-icon class="titleClose" @click="close">
          <CloseBold />
        </el-icon>
      </div>
    </template>

    <div class="main">
      <div class="tt">已选设备（{{ state.data.length }}）</div>
      <div class="tr">
        <el-input
          v-model="state.filterText"
          :suffix-icon="Search"
          class="ts"
          placeholder="根据关键词搜索"
        />
        <el-tree
          ref="treeRef"
          :data="state.trdata"
          node-key="nodeId"
          default-expand-all
          :props="defaultProps"
          :filter-node-method="filterNode"
          highlight-current
          show-checkbox
          @check-change="handleCheckChange"
          @node-click="handleClick"
        />
      </div>
    </div>

    <template #footer>
      <div class="my-footer">
        <el-button type="" class="diabtn" @click="state.visible = false"
          >取消</el-button
        >
        <el-button type="primary" class="diabtn" @click="ok">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Calendar, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { getOrgsOnTreeView } from "@/api/videoplan.js";
const props = defineProps({
  isShow: Boolean,
  ss: Array,
});
const state = reactive({
  visible: false,
  data: [],
  filterText: "",
  trdata: [],
  nodekey: "",
});
const defaultProps = {
  children: "childrens",
  label: function (data, node) {
    return data.nodeName;
  },
};
const treeRef = ref(null);
const emits = defineEmits(["ok"]);
watch(
  () => props.isShow,
  (newValue) => {
    state.visible = newValue;
  }
);
watch(
  () => state.filterText,
  (newvalue) => {
    console.log("newvalue", newvalue);
    treeRef.value.filter(newvalue);
  }
);
const getTree = async () => {
  let { data } = await getOrgsOnTreeView({});
  state.trdata = data.deviceOrgTree || [];

  // 清空已选节点
  if (treeRef.value) {
    treeRef.value.setCheckedKeys([]);
    state.data = [];
  }
};
// 高亮
const handleClick = (data) => {
  treeRef.value.setCurrentKey(data.nodeId);
  treeRef.value.setCheckedKeys([data.nodeId]); // 选中节点的复选框
};

const ok = () => {
  let node = treeRef.value.getCurrentNode();
  if (node == null) {
    ElMessage.error("请选择视频节点");
    return;
  }
  if (node.children && node.children.length > 0) {
    ElMessage.error("请选择视频节点");
    return;
  }
  emits("ok", node.nodeId);
  state.visible = false;
};

// 过滤
const filterNode = (value, data) => {
  if (!value) return true;
  return data.nodeName.includes(value);
};
const handleCheckChange = (data, checked, indeterminate) => {
  state.data = [...treeRef.value.getCheckedKeys()];
  if (checked) {
    treeRef.value.setCurrentKey(data.nodeId); // 高亮选中节点
  }
};
</script>

<style scoped lang="scss">
.main {
  height: 615px;
  padding: 25px 50px;
  display: flex;
  flex-direction: column;
  .tt {
    height: 30px;
    align-content: center;
    font-weight: 600;
    font-size: 16px;
    color: #293555;
  }
  .tr {
    height: 580px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .ts {
      height: 40px;
      line-height: 40px;
      margin: 5px 0;
    }
  }
}
:deep(.el-tree) {
  background: transparent;
}
.my-header {
  height: 50px;
  background: #6e8dfb;
  display: flex;
  align-items: center;
  padding: 0 25px;
  .titleClass {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
  }
  .titleClose {
    margin-left: auto;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
  }
}
.my-footer {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #ccddf7;
  .diabtn {
    width: 130px;
    height: 40px;
    font-size: 16px;
    border-radius: 6px;
  }
}
:deep(
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content
  ) {
  background-color: rgba(135, 206, 235, 0.2);
  color: #409eff; // 节点的字体颜色
  font-weight: bold; // 字体加粗
}
</style>

<style lang="scss">
.cusdia {
  background: linear-gradient(134deg, #e9effb 0%, #fbfcff 100%);
  box-shadow: 3px 3px 16px 0px rgba(159, 177, 206, 0.7);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  .el-dialog__footer {
    padding: 0;
  }
}
</style>
